<template>
  <div class="new-recruitment">
    <el-form ref="ruleForm" :model="recruitment" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="职位名称" class="filter-item" prop="name">
        <el-input v-model="recruitment.name" placeholder="请输入职位名称" />
      </el-form-item>
      <el-form-item label="薪资范围" required>
        <el-col :span="4">
          <el-form-item prop="salaryLower">
            <el-input v-model="recruitment.salaryLower" placeholder="薪资下限" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col class="line ml10" :span="1">k</el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="4">
          <el-form-item prop="salaryUpper">
            <el-input v-model="recruitment.salaryUpper" placeholder="薪资上限" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col class="line ml10" :span="1">k</el-col>
      </el-form-item>
      <el-form-item label="经验要求" prop="experience">
        <el-select v-model="recruitment.experience" clearable filterable class="filter-item" placeholder="请选择">
          <el-option v-for="item in experienceOperations" :key="item.value" :label="item.text" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学历要求" prop="education">
        <el-select v-model="recruitment.education" clearable filterable class="filter-item" placeholder="请选择">
          <el-option v-for="item in educationOperations" :key="item.value" :label="item.text" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="职位福利" prop="welfare">
        <el-select v-model="recruitment.welfare" clearable multiple filterable class="filter-item" placeholder="请选择">
          <el-option v-for="item in welfareOperations" :key="item.value" :label="item.text" :value="item.text" />
        </el-select>
      </el-form-item>
      <el-form-item label="职位标签" prop="tags">
        <el-select v-model="recruitment.tags" clearable multiple filterable class="filter-item" placeholder="请选择">
          <el-option v-for="item in tagOperations" :key="item.id" :label="item.details" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="职位职责" prop="duty">
        <quill-editor
          ref="myLQuillEditor"
          v-model="recruitment.duty"
          :options="dutyOption"
          class="editor"
        />
      </el-form-item>
      <el-form-item label="任职要求" prop="requirement">
        <quill-editor
          ref="myLQuillEditor"
          v-model="recruitment.requirement"
          :options="requirementOption"
          class="editor"
        />
      </el-form-item>
      <el-form-item label="联系人" class="filter-item" prop="contactName">
        <el-input v-model="recruitment.contactName" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话" class="filter-item" prop="contactPhone">
        <el-input v-model="recruitment.contactPhone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="联系邮箱" class="filter-item" prop="email">
        <el-input v-model="recruitment.email" placeholder="请输入联系邮箱" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { educationOperations, experienceOperations, welfareOperations } from '../../utils/constants'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
  fetchTagList,
  viewRecruitment,
  updateRecruitment
} from '@/api/recruitment'

// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline'],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }]
]

export default {
  name: 'Edit',
  components: {
    quillEditor
  },
  data() {
    return {
      recruitment: {
        id: '',
        name: '',
        salaryLower: '',
        salaryUpper: '',
        experience: '',
        education: '',
        duty: '',
        welfare: [],
        requirement: '',
        tags: [],
        contactName: '',
        contactPhone: '',
        email: ''
      },
      experienceOperations: experienceOperations,
      educationOperations: educationOperations,
      welfareOperations: welfareOperations,
      tagOperations: null,
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dutyOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入职位职责'
        // Some Quill optiosn...
      },
      requirementOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入任职要求'
        // Some Quill optiosn...
      },
      rules: {
        name: [
          { required: true, message: '请输入职位名称', trigger: 'change' }
        ],
        experience: [
          { required: true, message: '请选择经验要求', trigger: 'change' }
        ],
        education: [
          { required: true, message: '请选择学历要求', trigger: 'change' }
        ],
        contactName: [
          { required: true, message: '请输入联系人姓名', trigger: 'change' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'change' },
          { min: 11, max: 11,
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入联系邮箱', trigger: 'change' },
          { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        salaryLower: [
          { required: true, message: '薪资下限是必填项', trigger: 'change' }
        ],
        salaryUpper: [
          { required: true, message: '薪资上限是必填项', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    // console.log(this.$store.getters.username)
    fetchTagList().then(
      (response) => {
        this.tagOperations = response.data
      }
    )
    this.viewRecruitment()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.recruitment)
          const tag = this.recruitment.tags
          const welfares = this.recruitment.welfare
          if (tag != null) {
            this.recruitment.tags = tag.join('-')
          }
          if (welfares != null) {
            this.recruitment.welfare = welfares.join('-')
          }
          updateRecruitment(this.recruitment).then(
            (response) => {
              this.$message.success('发布成功')
              this.resetForm('ruleForm')
              this.$router.push({ path: '/job/view', query: { recruitmentId: this.recruitment.id }})
            },
            (error) => {
              this.$message.error(error.message)
            }
          )
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    viewRecruitment() {
      const param = { recruitmentId: this.$route.query.recruitmentId }
      viewRecruitment(param).then(
        (response) => {
          // console.log(response.data)
          this.recruitment = response.data
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
  .new-recruitment {
    margin-top: 30px;
    width: 50%;
  }
  .filter-item{
    width: 400px;
  }
  .ml10{
    margin-left: 5px;
  }
</style>
